<!DOCTYPE html>
<style>
    .header-bar {
        width: 100%;
        height: 145px;
        /* background-color: red; */
        padding-top: 15px;
        position: relative;
    }
    
    .header-bar-nav {
        width: 100%;
        height: 25px;
        /* background-color: pink; */
    }
    
    .header-bar-nav-con {
        position: relative;
        width: 1350px;
        height: 24px;
        margin: 0 auto;
        /* background-color: yellow; */
    }
    
    .header-bar-nav-con li {
        width: 130px;
        text-align: center;
    }
    
    .header-bar-nav-con li a {
        line-height: 24px;
        /* font-size: 20px; */
        color: black;
    }
    
    .header-bar-nav-con span {
        font-size: 22px;
    }
    
    .badge {
        width: 16px;
        height: 16px;
        position: absolute;
        right: 10px;
        top: -5px;
        background: #c51333;
        border-radius: 20px;
        color: #fff;
        line-height: 16px;
        text-align: center;
        font-size: 11px;
    }
    
    .ico-car-list {
        display: none;
        width: 300px;
        height: 185px;
        position: absolute;
        top: 50px;
        right: 95px;
        width: 300px;
        background: #fff;
        z-index: 1200;
        padding-top: 20px;
        border: 1px solid #e5e5e5;
        line-height: normal;
        box-shadow: 1px 3px 5px 0 rgba(0, 0, 0, .2);
    }
    
    .ico-car-list-con {
        text-align: center;
        padding: 40px 0;
    }
    
    .ico-car-list-con p {
        margin-bottom: 30px;
        font-size: 16px;
        color: #ccc;
    }
    
    .ico-car-list-con button {
        outline: 0;
        color: #fff;
        border-color: #c51333;
        background: #c51333;
        cursor: pointer;
        display: inline-block;
        font-weight: 400;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
        user-select: none;
        font-size: 14px;
        padding: 5px 15px 6px;
    }
    
    .header-bar-menus {
        height: 75px;
        width: 100%;
        position: relative;
    }
    
    .header-bar-menus-t {
        height: 45px;
        margin-top: 30px;
        width: 100%;
        background-color: #fff;
        /* position: sticky;
    top: 0; */
        z-index: 1000;
    }
    
    .header-bar-menus-t-con {
        text-align: left;
        padding-left: 200px;
        width: 1350px;
        height: 45px;
        margin: 0 auto;
        position: relative;
        /* background-color: crimson; */
    }
    
    .header-bar-menus-t-con .logo {
        position: absolute;
        left: 10px;
        top: -30px;
        z-index: 2000;
    }
    
    .header-bar-menus-t-con .logo img {
        width: 170px;
    }
    
    .header-bar-menus-t-con .nav-list li {
        display: inline-block;
        height: 45px;
        line-height: 45px;
        cursor: pointer;
    }
    
    .header-bar-menus-t-con .nav-list li::after {
        content: "";
        display: inline-block;
        height: 20px;
        width: 2px;
        background: #e5e5e5;
        position: absolute;
        top: 13px;
    }
    
    .header-bar-menus-t-con .nav-list li a {
        display: block;
        padding: 0 30px;
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
        color: #010101;
        outline: 0;
    }
    
    .search {
        height: 40px;
        width: 240px;
        border: 1px solid #010101;
        display: inline-block;
        border-radius: 5px;
        position: absolute;
        z-index: 1100;
        right: 20px;
        top: 2px;
    }
    
    .search span {
        font-size: 30px;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
    }
    
    .search input {
        border: 0;
        color: #010101;
        border-radius: 5px;
        padding: 10px;
        font-size: 14px;
        outline: none;
    }
    
    .search-res {
        display: none;
        width: 240px;
        height: 150px;
        position: absolute;
        background: #fff;
        min-width: 240px;
        right: 20px;
        top: 45px;
        padding: 20px 20px;
        border: 1px solid;
        z-index: 1100;
        font-size: 14px;
    }
    
    .search-res h5 {
        font-size: 16px;
        font-weight: bolder;
        line-height: 20px;
        margin-bottom: 10px;
    }
    
    .search-res p {
        line-height: 20px;
        margin-bottom: 10px;
    }
    
    .search-res p a {
        color: #000;
    }
    
    .header-bar-menus-f {
        height: 30px;
        background-color: #000;
        width: 100%;
        text-align: center;
        color: #fff;
        line-height: 30px;
    }
    
    .submenu1 {
        display: none;
        width: 100%;
        height: 400px;
        background-color: #e5e5e5;
        position: absolute;
        z-index: 1000;
        top: 45px;
        left: 0;
    }
    
    .submenu2 {
        display: none;
        width: 100%;
        height: 400px;
        background-color: #e5e5e5;
        position: absolute;
        z-index: 1000;
        top: 45px;
        left: 0;
    }
    
    .submenu3 {
        display: none;
        width: 100%;
        height: 400px;
        background-color: #e5e5e5;
        position: absolute;
        z-index: 1000;
        top: 45px;
        left: 0;
    }
    
    .submenu-con {
        width: 1350px;
        height: 400px;
        margin: 0 auto;
        padding: 20px 100px;
        /* background-color: pink; */
    }
    
    .submenu-con-l {
        width: 53%;
        height: 100%;
        /* background-color: yellow; */
    }
    
    .submenu-con-r {
        width: 47%;
        height: 100%;
        /* background-color: red; */
        display: flex;
        justify-content: space-between;
    }
    
    .submenu-con-r dt img {
        width: 260px;
    }
    
    .submenu-con-r dd {
        text-align: center;
        font-size: 16px;
        margin-top: 6px;
    }
    
    .submenu-con-l {
        display: flex;
        justify-content: space-around;
    }
    
    .submenu-con-l div {
        width: 200px;
        height: 250px;
        /* background-color: green; */
    }
    
    .submenu-con-l ul {
        width: 100px;
        margin: 0 auto;
    }
    
    .submenu-con-l ul h3 {
        font-size: 18px;
        font-weight: bolder;
        margin-bottom: 10px;
    }
    
    .submenu-con-l ul li {
        font-size: 16px;
        margin-left: 15px;
        line-height: 30px;
    }
    
    .submenu-con-l ul li a {
        color: #000;
    }
    
    .line::before {
        content: "";
        display: inline-block;
        height: 250px;
        width: 2px;
        background: #000;
        position: absolute;
        left: 386px;
    }
    
    .line1::before {
        content: "";
        display: inline-block;
        height: 250px;
        width: 2px;
        background: #000;
        position: absolute;
        left: 586px;
    }
</style>
<!-- <link rel="stylesheet" href="../css/header.css"> -->
<div class="header-bar">
    <div class="header-bar-nav">
        <div class="header-bar-nav-con">
            <ul class="fr">
                <li class="fl">
                    <a href="../login/login.html">登录</a> /
                    <a href="../apply/apply.html">注册</a>
                    <!-- ../login/login.html
                    ../apply/apply.html -->
                    <span class="iconfont icon-yonghu1"></span>
                </li>
                <li class="fl">
                    <a href="">门店查询</a>
                    <span class=""></span>
                </li>
                <li class="fl">
                    <a href="">在线客服</a>
                    <span class="iconfont icon-xiaoxi"></span>
                </li>
                <li class="fl">
                    <a href="../cart/cart.html">我的购物车</a>
                    <span class="iconfont icon-gouwuche"></span>
                    <p class="badge">0</p>
                </li>
            </ul>
        </div>
    </div>
    <div class="ico-car-list">
        <div class="ico-car-list-con">
            <p>购物车中还没有商品，赶紧选购吧！</p>
            <button>立即选购</button>
        </div>
    </div>
    <div class="header-bar-menus">
        <div class="header-bar-menus-t">
            <div class="header-bar-menus-t-con">
                <div class="logo">
                    <a href="../index/index.html">
                        <img src="img/10038.png" alt="logo">
                    </a>
                </div>
                <ul class="nav-list">
                    <li>
                        <a href="../list/list.html">全部商品</a>
                    </li>
                    <li>
                        <a href="../list/list.html">新品</a>
                    </li>
                    <li class="menu1">
                        <a href="">男装</a>
                    </li>
                    <li class="menu2">
                        <a href="../list/list.html">女装</a>
                    </li>
                    <li>
                        <a href="../list/list.html">情侣款</a>
                    </li>
                    <li class="menu3">
                        <a href="../list/list.html">配件</a>
                    </li>
                    <li>
                        <a href="../list/list.html">品牌动态</a>
                    </li>

                </ul>
                <div class="search">
                    <input type="text" placeholder="搜索Dickies">
                    <span class="iconfont icon-fangdajing"></span>
                </div>
                <div class="search-res">
                    <h5>热门搜索</h5>
                    <p><a href="">卫裤</a></p>
                    <p><a href="">卫衣</a></p>
                    <p><a href="">工装裤</a></p>
                </div>
            </div>
            <div class="submenu1">
                <div class="submenu-con">
                    <div class="submenu-con-l fl">
                        <div>
                            <ul>
                                <h3>男士上装</h3>
                                <li>
                                    <a href="">薄外套</a>
                                </li>
                                <li>
                                    <a href="">衬衫</a>
                                </li>
                                <li>
                                    <a href="">短袖polo</a>
                                </li>
                                <li>
                                    <a href="">短袖T恤</a>
                                </li>
                                <li>
                                    <a href="">长袖T恤</a>
                                </li>
                                <li>
                                    <a href="">棉服</a>
                                </li>
                                <li>
                                    <a href="">卫衣</a>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <ul class="line">
                                <h3>男士下装</h3>
                                <li>
                                    <a href="">短裤</a>
                                </li>
                                <li>
                                    <a href="">连体装</a>
                                </li>
                                <li>
                                    <a href="">卫裤</a>
                                </li>
                                <li>
                                    <a href="">休闲裤</a>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <ul>
                                <li></li>
                            </ul>
                        </div>
                    </div>
                    <div class="submenu-con-r fr">
                        <dl>
                            <dt>
                    <img src="img/10031.jpg">
                </dt>
                            <dd>Dickies薄外套</dd>
                        </dl>
                        <dl>
                            <dt>
                    <img src="img/10032.jpg">
                </dt>
                            <dd>Dickies下装</dd>
                        </dl>
                    </div>
                </div>
            </div>
            <div class="submenu2">
                <div class="submenu-con">
                    <div class="submenu-con-l fl">
                        <div>
                            <ul>
                                <h3>女士上装</h3>
                                <li>
                                    <a href="">薄外套</a>
                                </li>
                                <li>
                                    <a href="">衬衫</a>
                                </li>
                                <li>
                                    <a href="">短袖polo</a>
                                </li>
                                <li>
                                    <a href="">短袖T恤</a>
                                </li>
                                <li>
                                    <a href="">卫衣</a>
                                </li>
                                <li>
                                    <a href="">长袖T恤</a>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <ul class="line">
                                <h3>女士下装</h3>
                                <li>
                                    <a href="">半身裙</a>
                                </li>
                                <li>
                                    <a href="">短裤</a>
                                </li>
                                <li>
                                    <a href="">连体装</a>
                                </li>
                                <li>
                                    <a href="">连衣裙</a>
                                </li>
                                <li>
                                    <a href="">卫裤</a>
                                </li>
                                <li>
                                    <a href="">休闲裤</a>
                                </li>
                                <li>
                                    <a href="">阔腿裤</a>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <ul>
                                <li></li>
                            </ul>

                        </div>
                    </div>
                    <div class="submenu-con-r fr">
                        <dl>
                            <dt>
                    <img src="img/10029.jpg">
                </dt>
                            <dd>Dickies卫衣</dd>
                        </dl>
                        <dl>
                            <dt>
                    <img src="img/10030.jpg">
                </dt>
                            <dd>Dickies下装</dd>
                        </dl>
                    </div>
                </div>
            </div>
            <div class="submenu3">
                <div class="submenu-con">
                    <div class="submenu-con-l fl">
                        <div>
                            <ul>
                                <h3>包袋</h3>
                                <li>
                                    <a href="">单肩包</a>
                                </li>
                                <li>
                                    <a href="">双肩包</a>
                                </li>
                                <li>
                                    <a href="">斜挎包</a>
                                </li>
                                <li>
                                    <a href="">胸包/腰包</a>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <ul class="line">
                                <h3>鞋类</h3>
                                <li>
                                    <a href="">鞋类</a>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <ul class="line1">
                                <h3>其他</h3>
                                <li>
                                    <a href="">其他</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="submenu-con-r fr">
                        <dl>
                            <dt>
                    <img src="img/10005.jpg">
                </dt>
                            <dd>Dickies背包</dd>
                        </dl>
                        <dl>
                            <dt>
                    <img src="img/10028.jpg">
                </dt>
                            <dd>Dickies鞋类</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
        <div class="header-bar-menus-f">
            <p>指定专区每满400立减120（上不封顶），实付满399赠萌宠服装，实付满599加赠公仔购物袋</p>
        </div>
    </div>
</div>
<!-- <script src="../js/header.js"></script> -->
<script>
    $(".header-bar-nav-con li").eq(3).mouseenter(function() {
        $(".ico-car-list").css({
            display: "block",
        })
    });

    $(".ico-car-list").mouseenter(function() {
        $(this).css({
            display: "block",
        });
    });

    $(".ico-car-list").mouseleave(function() {
        $(this).css({
            display: "none",
        })
    });

    $(".search").focusin(function() {
        $(".search-res").css({
            display: "block",
        })
    });

    $(".search").focusout(function() {
        $(".search-res").css({
            display: "none",
        })
    });

    $(".header-bar-menus-t-con li").mousemove(function() {
        $(this).css({
            backgroundColor: "#e5e5e5",
        })
    });

    $(".header-bar-menus-t-con li").mouseout(function() {
        $(this).css({
            backgroundColor: "",
        })
    });


    $(".header-bar-menus-t-con .menu1").mousemove(function() {
        $(".submenu1").stop().slideDown({
            display: "block",
        })
    });

    $(".submenu1").mousemove(function() {
        $(this).stop().slideDown({
            display: "block",
        })
        $(".header-bar-menus-t-con .menu1").css({
            backgroundColor: "#e5e5e5",
        })
    });

    $(".header-bar-menus-t-con .menu1").mouseout(function() {
        $(".submenu1").stop().slideUp({
            display: "block",
        })
    });

    $(".submenu1").mouseout(function() {
        $(this).stop().slideUp({
            display: "block",
        })
        $(".header-bar-menus-t-con .menu1").css({
            backgroundColor: "",
        })
    });


    $(".header-bar-menus-t-con .menu2").mousemove(function() {
        $(".submenu2").stop().slideDown({
            display: "block",
        })
    });

    $(".submenu2").mousemove(function() {
        $(this).stop().slideDown({
            display: "block",
        })
        $(".header-bar-menus-t-con .menu2").css({
            backgroundColor: "#e5e5e5",
        })
    });

    $(".header-bar-menus-t-con .menu2").mouseout(function() {
        $(".submenu2").stop().slideUp({
            display: "block",
        })
    });

    $(".submenu2").mouseout(function() {
        $(this).stop().slideUp({
            display: "block",
        })
        $(".header-bar-menus-t-con .menu2").css({
            backgroundColor: "",
        })
    });


    $(".header-bar-menus-t-con .menu3").mousemove(function() {
        $(".submenu3").stop().slideDown({
            display: "block",
        })
    });

    $(".submenu3").mousemove(function() {
        $(this).stop().slideDown({
            display: "block",
        })
        $(".header-bar-menus-t-con .menu3").css({
            backgroundColor: "#e5e5e5",
        })
    });

    $(".header-bar-menus-t-con .menu3").mouseout(function() {
        $(".submenu3").stop().slideUp({
            display: "block",
        })
    });

    $(".submenu3").mouseout(function() {
        $(this).stop().slideUp({
            display: "block",
        })
        $(".header-bar-menus-t-con .menu3").css({
            backgroundColor: "",
        })
    });
</script>